<template>
  <!--   个人信息卡片     -->
  <el-card shadow="hover">
    <div class="personCardTop">
      <div>
        <img class="personimg" :src="personimg" alt="头像">
      </div>
      <div class="personInfo">
        <h1>姓名 ：{{$store.state.user.name}}</h1>
        <br>
        <p>地址 ： {{$store.state.user.address }}</p>
        <p>用户类型 ： {{$store.state.user.usertype }}</p>
      </div>
    </div>
    <hr/>
    <div>
      <p class="text">年纪：<span>{{$store.state.user.age}} 岁</span></p>
      <p class="text">性别：<span>{{$store.state.user.sex}}</span></p>
    </div>
  </el-card>
</template>

<script>
export default {

  name: "HomepersonCardTop",

  data(){
    return{
      personimg: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
    }
  },


}
</script>

<style scoped>
.personimg {
  width: 10vw;
  border-radius: 50%;
  margin-bottom: 20px;
}

.personCardTop {
  display: flex;
  align-items: center;
}

.personInfo {
  padding-left: 50px;
}

.text {
  margin-top: 20px;
  margin-left: 40px;
}
.personInfo h1 {
  font-size: 30px;
}
.text span {
  margin-left: 100px;
}

p{
  color: #D4D0DC;
  margin-top: 10px;
  font-size: 14px;
  margin: 20px 0;
}
</style>